<template>
  <div class="sibling-b">
    <h3>🧒 兄弟组件 B</h3>
    <p v-if="message" class="received">📬 收到消息：{{ message }}</p>
    <p v-else class="waiting">⏳ 等待兄弟 A 的消息...</p>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue'

const message = ref('')
const bus = inject('siblingBus')

// 监听来自兄弟 A 的消息
bus.on('message-from-a', (msg) => {
  message.value = msg
})
</script>

<style scoped>
.sibling-b {
  border: 2px solid #4ecdc4;
  padding: 20px;
  border-radius: 8px;
}
.received {
  background-color: #d4edda;
  padding: 10px;
  border-radius: 4px;
  color: #155724;
  margin-top: 10px;
}
.waiting {
  color: #6c757d;
  font-style: italic;
}
</style>
